<!-- 征信公司融资意向管理 -->
<template>
  <div class="app-container">
    <el-tabs
      v-model="tabNum"
      @tab-click="tabClickBtn"
      style="background:#fff;padding-left:10px;"
    >
      <el-tab-pane
        label="待审批"
        name="1"
      >
        <avue-crud
          ref="crud1"
          :option="option_1"
          :data="data_1"
          :table-loading="loading_1"
          :page.sync="page_1"
          @on-load="onLoad_1"
          @search-change="searchChange_1"
          @search-reset="resetChange(1)"
          :search.sync="search_1"
        >
          <!-- <template slot="search" slot-scope="{row,size}">
            <div class="el-col el-col-10 el-col-offset-0 el-col-xs-24 el-col-sm-12 el-col-md-10 avue-form__row" style="padding-left: 10px; padding-right: 10px;">
              <div class="el-form-item el-form-item--small avue-form__item--">
                <label for="daterange" class="el-form-item__label" style="width: 130px;">日期范围:</label>
                <div class="el-form-item__content" style="margin-left: 130px;">
                  <el-date-picker v-model="search_1.daterange" type="daterange" :size="size" range-separator="至" start-placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
          </template> -->
          <template
            slot="menu"
            slot-scope="scope"
          >
            <!-- <el-button size="small" type="text" @click="verify(scope.row)" icon="el-icon-document-checked" >审核</el-button> -->
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row,'pri_status')"
              v-if="scope.row.rzStatus != 1"
              icon="el-icon-document-checked"
            >认证审核</el-button>
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row,'SQ_STATUS')"
              v-if="scope.row.sqStatus != 1"
              icon="el-icon-document-checked"
            >授权审核</el-button>
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row,'intention')"
              v-if="scope.row.sqStatus == 1 && scope.row.rzStatus == 1"
              icon="el-icon-document-checked"
            >意向审核</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane
        label="已审批"
        name="2"
      >
        <avue-crud
          ref="crud2"
          :option="option_2"
          :data="data_2"
          :table-loading="loading_2"
          :page.sync="page_2"
          @on-load="onLoad_2"
          @search-change="searchChange_2"
          @search-reset="resetChange(2)"
          :search.sync="search_2"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="viewOpen(scope.row)"
              icon="el-icon-document-checked"
            >查看</el-button>
            <!-- <el-button size="small" type="text" @click="pay(scope.row)" icon="el-icon-top" v-if="scope.row.RZZT == 5">付款</el-button> -->
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="dialogTitle"
      class="avue-dialog"
      :visible.sync="dialogVisble"
      width="60%"
      center
    >
      <el-steps
        :active="stepActive"
        v-if="dialogType === 'view'"
      >
        <el-step
          v-for="(i,index) in stepList"
          :key="index"
          :title="i.text"
        ></el-step>
      </el-steps>
      <simpleTable :Data="simpleTableData"></simpleTable>
      <el-tabs v-if="dialogType === 'verify'  && verifyFlag === 'SQ_STATUS'">
        <el-tab-pane label="上传材料">
          <el-image
            v-for="item in srcList"
            :key="item"
            style="width: 200px; height: 200px"
            :src="item"
            :preview-src-list="srcList"
          ></el-image>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-if="dialogType === 'verify'  && verifyFlag === 'pri_status'">
        <el-tab-pane label="营业执照">
          <el-image
            v-for="item in yyzzList"
            :key="item"
            style="width: 200px; height: 200px"
            :src="item"
            :preview-src-list="yyzzList"
          ></el-image>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-if="dialogType === 'verify'">
        <el-tab-pane label="审核信息">
          <el-form
            :model="verifyData"
            ref="verifyForm"
          >
            <el-form-item
              label=""
              prop="verifyResult"
            >
              <el-radio-group v-model="verifyData.verifyResult">
                <el-radio :label="3">通过</el-radio>
                <el-radio :label="6">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              v-if="verifyData.verifyResult == 6"
              :rules="[{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]"
            >
              <el-input
                type="textarea"
                v-model="verifyData.remark"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="匹配金融机构"
              prop="orgId"
              v-if="verifyData.verifyResult == 3 && verifyFlag === 'intention'"
              :rules="[{ required: true, message: '请选择匹配金融机构', trigger: 'blur' }]"
            >
              <el-select
                v-model="verifyData.orgId"
                placeholder="请选择匹配金融机构"
              >
                <el-option
                  v-for="item in orgOptions"
                  :key="item.org_id"
                  :label="item.org_name"
                  :value="item.org_id"
                >
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>

        </el-tab-pane>
      </el-tabs>

      <el-tabs v-if="dialogType === 'view'">
        <el-tab-pane label="操作记录">
          <el-table
            :data="viewTableData"
            border
          >
            <el-table-column
              prop="cz"
              label="操作"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="czr"
              label="操作人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jg"
              label="操作结果"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="时间"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="dialog-footer">
        <el-button
          type="primary"
          v-if="dialogType === 'verify'"
          @click="verifySave"
          round
        >保存</el-button>
        <el-button
          @click="dialogVisble = false"
          type="primary"
          plain
          round
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  zxRefuse,
  zxYxPass,
  zxNoYxApprove,
  zxIsYxApprove,
  getLiuc,
  searchAuthById,
  updateApproveAuth,
  getBank,
  searchRzxx,
  updateRzxx,
} from '@/api/manager.js'
import simpleTable from './components/simpleTable.vue'
import {
  liuDic_zx,
  creditFinanceIntention_verify,
  org_rzyx_sh,
  activeList,
  credit_rzyx_ck,
  createTableData_orgFinanceApply_verify,
  createTableData_creditFinanceIntention,
  createTableData_creditFinanceApply_view,
  createStepList,
  sqStatusDic_zx,
  rzStatusDic_zx,
  org_rzsq_sh_jq,
  org_rzsq_sh_jq_two,
} from './finance.util'
import mixin from '../work/mixin.vue'
const _option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 100,
  card: true,
  labelWidth: 135,
  delBtn: false,
  editBtn: false,
  searchLabelWidth: '20%',
  searchSpan: 8,
  searchMenuSpan: 4,
  columnBtn: false,
  refreshBtn: false,
  selectClearBtn: false,
  addBtn: false,
  searchShowBtn: false,
  column: [
    {
      label: '企业名称',
      prop: 'qymc',
      search: true,
      order: 10,
      width: '300',
    },
    {
      label: '法人姓名',
      prop: 'FDDBR',
      order: 11,
    },
    {
      label: '需求金额(万元)',
      prop: 'XQJE',
      width: '150',
      order: 12,
    },
    {
      label: '发布人',
      prop: 'name',
      search: true,
      order: 20,
    },
    {
      label: '发布时间',
      prop: 'APPLY_TIME',
      order: 21,
      width: '250',
    },
  ],
}

export default {
  components: {
    simpleTable,
  },
  mixins: [mixin],
  data() {
    return {
      tabNum: '1',
      loading_1: false,
      loading_2: false,
      page_1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      page_2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data_1: [],
      data_2: [],
      option_1: {},
      option_2: {},
      search_1: {
        //productName:'awd'
      },
      search_2: {},
      dialogTitle: '审核',
      dialogVisble: false,
      simpleTableData: [],
      dialogType: 'verify',
      verifyData: {
        verifyResult: 3,
        remark: '',
        orgId: '',
      },
      stepActive: '',
      stepList: [],
      viewTableData: [],
      verifyFlag: '',
      srcList: [],
      yyzzList: [],
      orgOptions: [],
    }
  },
  created() {
    const { column } = _option
    const rzztDicData = Object.keys(liuDic_zx).map((i) => {
      return {
        label: liuDic_zx[i],
        value: Number(i),
      }
    })
    const sqStatusData = Object.keys(sqStatusDic_zx).map((i) => {
      return {
        label: sqStatusDic_zx[i],
        value: Number(i),
      }
    })
    const rzStatusData = Object.keys(rzStatusDic_zx).map((i) => {
      return {
        label: rzStatusDic_zx[i],
        value: Number(i),
      }
    })
    //console.log('rzztDicData',rzztDicData)
    this.option_1 = {
      ..._option,
      excelBtn: true,
      selection: true,
      column: [
        ...column,
        {
          label: '日期范围',
          prop: 'daterange',
          search: true,
          hide: true,
          searchRange: true,
          type: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
        },
        {
          label: '企业授权',
          prop: 'sqStatus',
          search: true,
          type: 'select',
          order: 20,
          searchValue: ' ',
          dicData: [...sqStatusData, { label: '全部', value: ' ' }],
        },
        {
          label: '发布人认证',
          prop: 'rzStatus',
          search: true,
          type: 'select',
          order: 20,
          searchValue: ' ',
          dicData: [...rzStatusData, { label: '全部', value: ' ' }],
        },
        {
          label: '发布人联系方式',
          prop: 'pnumber',
          order: 21,
          hide: true,
        },
        {
          label: '企业地址',
          prop: 'JYCS',
          order: 22,
          hide: true,
        },
      ],
    }
    this.option_2 = {
      ..._option,
      searchSpan: 6,
      excelBtn: false,
      column: [
        ...column,
        {
          label: '融资状态',
          prop: 'RZZT',
          search: true,
          type: 'select',
          order: 20,
          dicData: rzztDicData,
        },
      ],
    }

    getBank().then((res) => {
      this.orgOptions = res.data
    })
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    // filterQylx(val,qylxList){
    // }
  },
  methods: {
    tabClickBtn(e) {
      if (e.index == 0) {
        this.onLoad_1()
      } else {
        this.onLoad_2()
      }
    },
    onLoad_1() {
      console.log('this.search_1', this.search_1)
      const { daterange } = this.search_1
      const params = {
        ...this.search_1,
        startTime: daterange ? daterange[0] : '',
        endTime: daterange ? daterange[1] : '',
        pageNum: this.page_1.currentPage,
        pageSize: this.page_1.pageSize,
      }
      this.loading_1 = true
      zxNoYxApprove(params).then((data) => {
        if (data.status) {
          this.loading_1 = false
          //data.data.records[0].pri_status = 0
          this.data_1 = data.data.records
          this.page_1.total = data.data.total
          // this.$refs.crud1.$refs.table.columns.splice(9,1)
          // this.$nextTick(() => {
          //     this.$refs.crud1.doLayout()
          //     console.log(this.$refs.crud1.$refs.table.columns)
          // })
        } else {
          this.$message({
            type: 'error',
            message: data.msg,
          })
        }
      })
    },
    onLoad_2() {
      const { RZZT } = this.search_2
      const params = {
        ...this.search_2,
        rzzt: RZZT,
        pageNum: this.page_2.currentPage,
        pageSize: this.page_2.pageSize,
      }
      this.loading_2 = true
      zxIsYxApprove(params).then((data) => {
        if (data.status) {
          this.loading_2 = false
          this.data_2 = data.data.records
          this.page_2.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange(tag) {
      // this.page.currentPage = 1;
      // this.page.pageSize = 10;
      // this.onLoad();
      this[`onLoad_${tag}`]()
    },

    /* 搜索筛选 */
    searchChange_1(params, done) {
      done()
      this.page_1.currentPage = 1
      this.page_1.pageSize = 10
      this.onLoad_1()
    },
    searchChange_2(params, done) {
      done()
      this.page_2.currentPage = 1
      this.page_2.pageSize = 10
      this.onLoad_2()
    },
    verify(row, verifyFlag) {
      const { authId, pnumber, SHTYXYDM } = row
      this.currentRow = row
      this.dialogType = 'verify'
      this.verifyFlag = verifyFlag
      if (verifyFlag === 'SQ_STATUS') {
        this.srcList = []
        this.loading_1 = true
        searchAuthById({ id: authId }).then((res) => {
          console.log('searchAuthById ', res)
          this.simpleTableData = createTableData_creditFinanceIntention({
            ...row,
            ...res.data,
          })
          res.data.fileList.forEach(async (item) => {
            const tempCanvas = await this.imgToCanvas(item.base64Code)
            // 2.canvas添加水印
            //const markText = '我是水印'
            const canvas = this.addWatermark(tempCanvas, res.data.printBk)
            // 3.canvas转成img
            const img = this.convasToImg(canvas)
            this.srcList.push(img.src)
            console.log('this.srcList ', this.srcList)
          })
          this.loading_1 = false
          this.dialogVisble = true
        })
      } else if (verifyFlag === 'intention') {
        // getBank().then(res => {
        //     console.log('getBank ',res )
        //     this.simpleTableData = createTableData_orgFinanceApply_verify(row)
        //     this.orgOptions = res.data;
        //     this.loading_1 = false;
        //     this.dialogVisble = true;
        // })
        this.simpleTableData = org_rzyx_sh(row)
        this.dialogVisble = true
      } else {
        this.yyzzList = []
        this.loading_1 = true
        searchRzxx({ pnumber, shtyxydm: SHTYXYDM }).then(async (res) => {
          console.log('searchAuthById ', res)
          if (res.status) {
            this.rzID = res.data.id
            //this.simpleTableData = viewDataInfo(row);
            this.simpleTableData = creditFinanceIntention_verify(row)
            const tempCanvas = await this.imgToCanvas(res.data.base64Code)
            // 2.canvas添加水印
            //const markText = '我是水印'
            const canvas = this.addWatermark(tempCanvas, res.data.printBk)
            // 3.canvas转成img
            const img = this.convasToImg(canvas)
            this.yyzzList.push(img.src)
            this.loading_1 = false
            this.dialogVisble = true
          } else {
            this.loading_1 = false
            this.$message({
              type: 'error',
              message: '网络错误,请稍后重试!',
            })
          }
        })
      }
    },
    verifySave() {
      this.$refs['verifyForm'].validate((valid) => {
        console.log('valid', valid)
        if (valid) {
          console.log('this.verifyFlag ', this.verifyFlag)
          if (this.verifyFlag === 'SQ_STATUS') {
            this.sqSave()
          } else if (this.verifyFlag === 'pri_status') {
            this.priSave()
          } else {
            this.intentionSave()
          }
        }
      })
    },
    sqSave() {
      const { authId } = this.currentRow
      const { verifyResult, remark } = this.verifyData //zxPass
      let params = {
        authId: authId,
        status: verifyResult === 3 ? '1' : '3',
        comment: verifyResult === 3 ? '' : remark,
      }
      updateApproveAuth(params).then((res) => {
        if (res.status) {
          this.openCel = false
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.onLoad_1()
          this.onLoad_2()
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
        this.dialogVisble = false
      })
    },
    priSave() {
      const { verifyResult, remark } = this.verifyData //zxPass
      let params = {
        id: this.rzID,
        status: verifyResult === 3 ? '1' : '3',
        comment: verifyResult === 3 ? '' : remark,
      }
      updateRzxx(params).then((res) => {
        if (res.status) {
          this.openCel = false
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          this.onLoad_1()
          this.onLoad_2()
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
        this.dialogVisble = false
      })
    },
    intentionSave() {
      const { id } = this.currentRow
      const { verifyResult, remark, orgId } = this.verifyData //zxPass
      if (verifyResult === 3) {
        zxYxPass({ id, orgId }).then((res) => {
          //console.log('zxRefuse',res)
          if (res.status) {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.onLoad_1()
            this.onLoad_2()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
          this.dialogVisble = false
        })
      } else {
        zxRefuse({
          id,
          remark,
        }).then((res) => {
          //console.log('zxRefuse',res)
          if (res.status) {
            this.$message({
              type: 'success',
              message: res.msg,
            })
            this.onLoad_1()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
          this.dialogVisble = false
        })
      }
    },
    //查看
    viewOpen(row) {
      console.log('viewOpen', row)
      const { id, RZZT, ORG_ID } = row
      getLiuc({ id }).then((res) => {
        if (res.status) {
          this.viewTableData = res.data
          this.dialogTitle = '查看详情'
          if (RZZT === 6) {
            this.simpleTableData = org_rzsq_sh_jq_two({
              ...row,
              org_name: this.orgOptions.find((i) => i.org_id == ORG_ID)
                .org_name,
            })
            //this.simpleTableData = createTableData_creditFinanceApply_view({...row,org_name:this.orgOptions.find(i => i.org_id == ORG_ID).org_name})
            this.currentRow = row
            this.stepList = createStepList().filter((i) =>
              i.show.includes(RZZT)
            )
            this.stepActive = activeList[RZZT]
            this.dialogType = 'view'
            this.dialogVisble = true
          } else {
            this.simpleTableData =
              RZZT === 1
                ? credit_rzyx_ck(row)
                : credit_rzyx_ck({
                    ...row,
                    org_name: this.orgOptions.find((i) => i.org_id == ORG_ID)
                      .org_name,
                  })
            //this.simpleTableData = createTableData_creditFinanceApply_view({...row,org_name:this.orgOptions.find(i => i.org_id == ORG_ID).org_name})
            this.currentRow = row
            this.stepList = createStepList().filter((i) =>
              i.show.includes(RZZT)
            )
            this.stepActive = activeList[RZZT]
            this.dialogType = 'view'
            this.dialogVisble = true
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    },

    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
/deep/ .el-step__head.is-process {
  color: #ccc !important;
  border-color: #ccc !important;
}
/deep/ .el-step__title.is-process {
  color: #ccc !important;
}
</style>
